<template>
  <div>
    <h1>青龙</h1>
    <button @click="test01ClickHandler">测试动态路由</button>
    <br/>
    <router-link to="/bird?message=happy&money=500">测试路由传参[键值对][写死]</router-link>
    <br/>
    <router-link v-bind:to="queryParamPath">测试路由传参[键值对][不写死]</router-link>
    <br/>
    <button @click="test02ClickHandler">测试路由传参[键值对][不写死][简略写法]</button>
    <br/>
    <button @click="test03ClickHandler">测试路由传参[键值对][不写死][豪华写法]</button>
    <br/>
    <router-link to="/tiger/tom/50">测试路由传参[路径][写死]</router-link>
    <br/>
    <button @click="test04ClickHandler">测试路由传参[路径][不写死][拼字符串]</button>
    <br/>
    <button @click="test05ClickHandler">测试路由传参[路径][不写死][规则名称]</button>
  </div>
</template>

<script setup>
// -------------------------导入区-------------------------
import {useRouter} from "vue-router";

// -------------------------数据区-------------------------
let router = useRouter();

let queryParamPath = {
  path: "/bird",
  query: {
    message: "very happy message",
    money: "6666666666"
  }
};

// -------------------------功能区-------------------------
const test01ClickHandler = () => {
  router.push("/bird");
}

const test02ClickHandler = () => {
  let message = "热烈庆祝好消息";
  let money = 99999;
  router.push(`/bird?message=${message}&money=${money}`)
}

const test03ClickHandler = () => {
  let targetPathObj = {
    path: "/bird",
    query: {
      message: "1945年9月2日日本正式投降",
      money: "333333333"
    }
  };
  router.push(targetPathObj);
}

const test04ClickHandler = () => {
  let tigerName = "jerry";
  let tigerAge = 80;
  router.push(`/tiger/${tigerName}/${tigerAge}`);
}

const test05ClickHandler = () => {
  let tigerNameValue = "jerry66666";
  let tigerAgeValue = 666;

  router.push({
    name: "tigerRule", // 指定路由规则的名称
    params: {
      tigerName: tigerNameValue, // 给路径参数名称设置具体的值
      tigerAge: tigerAgeValue // 给路径参数名称设置具体的值
    }
  })
}
</script>

<style scoped>
div {
  border: 1px solid black;
  width: 500px;
  height: 500px;
}

button {
  border: 1px solid black;
}
</style>